<template>
    <div>
        <header class="w-screen h-[60px] flex justify-between items-center px-3 bg-gray-100 text-gray-700 dark:text-gray-400 dark:bg-gray-800">
            <div class="w-[1200px] flex justify-around">
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/">{{ $t("menu.home" )}}</NuxtLink>
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/myui">{{ $t("menu.uiTest" )}}</NuxtLink>
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/route/base">{{ $t("menu.baseRouter" )}}</NuxtLink>
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/route/2024">{{ $t("menu.dynamicRouter" )}}</NuxtLink>
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/user">{{ $t("menu.nestedRouter" )}}</NuxtLink>
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/middleware">{{ $t("menu.middleware" )}}</NuxtLink>
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/shopcart">{{ $t("menu.shopcart" )}}</NuxtLink>
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/request2">{{ $t("menu.request" )}}</NuxtLink>
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/logout" v-if="useUserStore().getToken()" @click="handleLogout">{{ $t("menu.logout" )}}</NuxtLink>
                <NuxtLink class="dark:hover:text-white hover:text-blue-800" to="/login" v-else>{{ $t("menu.login" )}}</NuxtLink>
            </div>
            <div class="flex items-center">
                <ThemeMode class="mr-2"></ThemeMode>
                <Language></Language>
            </div>
        </header>
        <main class="main text-gray-900  dark:bg-gray-800 dark:text-white">
            <slot></slot>
        </main>
        <footer class="w-screen h-[60px] fixed bottom-0 left-0 flex justify-center items-center text-gray-700 hover:text-blue-700 bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:text-white">尾部</footer>
    </div>
</template>

<script setup lang="ts">
const handleLogout = () => {
    ElMessage.success("已注销");
    useUserStore().setToken("");
    navigateTo("/login");
}
</script>

<style scoped lang="scss">
.main {
    height: $main-height;
}
</style>